<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>
<!-- 引入jquery -->
<script type="text/javascript" th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	var axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日'];
	var data = axisData.map(function (item, i) {
	    return Math.round(Math.random() * 1000 * (i + 1));
	});
	var links = data.map(function (item, i) {
	    return {
	        source: i,
	        target: i + 1
	    };
	});
	links.pop();
	option = {
	    title: {
	        text: '笛卡尔坐标系上的 Graph'
	    },
	    tooltip: {},
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        data: axisData
	    },
	    yAxis: {
	        type: 'value'
	    },
	    series: [
	        {
	            type: 'graph',
	            layout: 'none',
	            coordinateSystem: 'cartesian2d',
	            symbolSize: 40,
	            label: {
	                show: true
	            },
	            edgeSymbol: ['circle', 'arrow'],
	            edgeSymbolSize: [4, 10],
	            data: data,
	            links: links,
	            lineStyle: {
	                color: '#2f4554'
	            }
	        }
	    ]
	};

	option && myChart.setOption(option);
	
	</script>
</body>
</html>